<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>添加药品</title>
    <link rel="stylesheet" href="/resource/common/layui/css/layui.css" media="all"/>
</head>
<style>
    .layui-form-label {
        width: 60px;
    }

    input::-webkit-input-placeholder {
        color: #d2d2d2;
    }

    input::-moz-placeholder { /* Mozilla Firefox 19+ */
        color: #d2d2d2;
    }

    input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color: #d2d2d2;
    }

    input:-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: #d2d2d2;
    }

    .layui-input-block {
        width: 60%;
        margin-left: 90px;
    }

    .layui-input, .layui-select, .layui-textarea {
        height: 30px;
    }

    .layui-input-inline {
        width: 50%;
    }
</style>
<body>
<div class="yadmin-body animated fadeIn" style="padding: 40px">
    <div class="layui-form">
        <div class="layui-form-item">
            <label for="name" class="layui-form-label">
                药品名称:
            </label>
            <div class="layui-input-block">
                <input type="text" id="name" name="name" lay-verify="required" lay-vertype="tips"
                       th:value="${product.name}"
                       placeholder="请输入药品名称"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">
                药品图片:
            </label>
            <div class="layui-input-block">
                <div class="layui-upload-drag" id="upImg">
                    <i class="layui-icon" style="color: #1E9FFF">&#xe64a;</i>
                    <p>建议上传时注意图片尺寸大小,否则前台图片显示不美观</p>
                    <div class="layui-hide" id="uploadDemoView">
                        <hr>
                        <img src="" alt="上传成功后渲染" style="max-width: 196px">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="specification" class="layui-form-label">
                规格参数:
            </label>
            <div class="layui-input-block">
                <input type="text" id="specification" name="specification" lay-verify="required"
                       lay-vertype="tips"
                       autocomplete="off"
                       placeholder="请输入规格参数" th:value="${product.specification}" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="disPrice" class="layui-form-label">
                价格:
            </label>
            <div class="layui-input-block">
                <input type="number" id="disPrice" name="disPrice" lay-verify="required|price"
                       lay-vertype="tips" autocomplete="off" th:value="${product.disPrice}"
                       placeholder="请输入价格" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item  layui-form-text">
            <label class="layui-form-label">
                药品详情:
            </label>
            <div class="layui-input-block">
                <div id="div1" th:utext="${product.content}">

                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="hidden" id="img" th:value="${product.img}" name="img">
                <input type="hidden" id="id" th:value="${product.id}" name="id">
                <button class="layui-btn layui-btn-normal btn-w100" lay-submit="" lay-filter="add">确认修改
                </button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="//unpkg.com/wangeditor/dist/wangEditor.min.js"></script>
<script type="text/javascript" src="/resource/common/layui/layui.js"></script>
<script th:inline="javascript">
    var E = window.wangEditor
    var editor = new E('#div1')
    editor.create()
    //后台传入的药品分类
    var categoryList = [[${categoryList}]]
    layui.use(['form', 'layer', 'upload', 'layedit'], function () {
        $ = layui.jquery;
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , upload = layui.upload;
        //拖拽上传
        upload.render({
            elem: '#upImg'
            , url: '/upload.do'
            , done: function (res) {
                layer.msg('上传成功');
                console.log(res)
                layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.obje);
                $("#img").val(res.obje);
            }
        });
        //自定义验证规则
        form.verify({
            price: function (value) {
                if (!new RegExp("(^[1-9]\\d*(\\.\\d{1,2})?$)|(^0(\\.\\d{1,2})?$)").test(value)) {
                    return '请输入正确的产品价格:整数或者保留两位小数';
                }
            }
        });
        form.on('submit(add)', function (form) {
            if (form.field.img == '') {
                layer.msg("请上传药品图片!", {icon: 5});
                return false
            }
            form.field.content = editor.txt.html();
            $.ajax({
                url: '/product/product.do',
                type: 'put',
                data: form.field,
                dataType: 'json',
                async: false,
                success: function (result) {
                    if (!result.status) {
                        layer.msg(result.msg, {time: 2000});
                        return false;
                    } else {
                        parent.layer.msg("编辑成功!", {time: 1000});
                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                        parent.layui.table.reload('tableId', {});
                    }
                }
            });
        });
    });
</script>

</body>
</html>